<%--
  Created by IntelliJ IDEA.
  User: ${USER}
  Date: ${DATE}
  Time: ${TIME}
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" isErrorPage="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>个人资料</title>
    <base href="<%= basePath %>"/>
    <link href="<%= basePath %>static/business/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="<%= basePath %>static/business/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="<%= basePath %>static/business/css/personal.css" rel="stylesheet" type="text/css">
    <link href="<%= basePath %>static/business/css/infstyle.css" rel="stylesheet" type="text/css">

    <script src="<%= basePath %>static/business/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="<%= basePath %>static/business/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
</head>

<body>
<!--头 -->
<header>
    <jsp:include page="header.jsp"/>
</header>

<div class="nav-table"></div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-info">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small>
                    </div>
                </div>
                <hr/>
                <!--头像 -->
                <div class="user-infoPic">
                    <div class="filePic">
                        <input type="file" onchange="updateHeaderUrl()" name="headUrl" class="inputPic"
                               allowexts="gif,jpeg,jpg,png,bmp"
                               accept="image/*">
                        <c:if test="${onlineUser.headUrl!=null}">
                            <img class="am-circle am-img-thumbnail"
                                 src="<%= basePath %>static/file/headUrl/${onlineUser.headUrl}" alt=""/>
                        </c:if>
                        <c:if test="${onlineUser.headUrl==null}">
                            <img class="am-circle am-img-thumbnail"
                                 src="<%= basePath %>static/business/images/getAvatar.do.jpg" alt=""/>
                        </c:if>
                    </div>

                    <p class="am-form-help">头像</p>

                    <div class="info-m">
                        <div><b>用户名：<i>
                            <c:if test="${onlineUser.customerName==nul}">
                                ${onlineUser.emai}
                            </c:if>
                            <c:if test="${onlineUser.customerName!=null}">
                                ${onlineUser.customerName}
                            </c:if>
                        </i></b></div>
                        <div class="vip">
                            <span></span><a href="#">会员专享</a>
                        </div>
                    </div>
                </div>

                <!--个人信息 -->
                <div class="info-main">
                    <form class="am-form am-form-horizontal" method="post" action="cntApi/updateUserInfo">
                        <input type="hidden" name="customerInfoId" value="${onlineUser.customerInfoId}">
                        <input type="hidden" name="customerId" value="${onlineUser.customerId}">
                        <div class="am-form-group">
                            <label for="user-name2" class="am-form-label">昵称</label>
                            <div class="am-form-content">
                                <c:if test="${onlineUser.customerName==null}">
                                    <input type="text" name="customerName" id="user-name2" placeholder="nickname"
                                           value="${onlineUser.emai}">
                                </c:if>
                                <c:if test="${onlineUser.customerName!=null}">
                                    <input type="text" name="customerName" id="user-name2" placeholder="nickname"
                                           value="${onlineUser.customerName}">
                                </c:if>
                                <small>昵称长度不能超过40个汉字</small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-form-label">姓名</label>
                            <div class="am-form-content">
                                <input type="text" name="realName" id="user-name" placeholder="name"
                                       value="${onlineUser.realName}">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">性别</label>
                            <div class="am-form-content sex">
                                <label class="am-radio-inline">
                                    <c:if test="${onlineUser.sex!=2}">
                                        <input type="radio" name="sex" value="2" data-am-ucheck/> 男
                                    </c:if>
                                    <c:if test="${onlineUser.sex==2}">
                                        <input type="radio" name="sex" value="2" checked/> 男
                                    </c:if>
                                </label>
                                <label class="am-radio-inline">
                                    <c:if test="${onlineUser.sex!=1}">
                                        <input type="radio" name="sex" value="1" data-am-ucheck/> 女
                                    </c:if>
                                    <c:if test="${onlineUser.sex==1}">
                                        <input type="radio" name="sex" value="1" checked/> 女
                                    </c:if>
                                </label>
                                <label class="am-radio-inline">
                                    <c:if test="${onlineUser.sex!=0}">
                                        <input type="radio" name="sex" value="0" data-am-ucheck/> 保密
                                    </c:if>
                                    <c:if test="${onlineUser.sex==0}">
                                        <input type="radio" name="sex" value="0" checked/> 保密
                                    </c:if>
                                </label>

                            </div>
                        </div>
                        <body onLoad="init()">
                        <div class="am-form-group">
                            <label class="am-form-label">生日</label>
                            <div class="am-form-content birth">
                                <c:if test="${onlineUser.birthday!=null}">
                                    <input type="date" name="birthday" value="${onlineUser.birthday}">
                                </c:if>
                                <c:if test="${onlineUser.birthday==null}">
                                    <input type="date" name="birthday">
                                </c:if>

                            </div>

                        </div>
                        </body>
                        <div class="am-form-group">
                            <label for="user-phone" class="am-form-label">电话</label>
                            <div class="am-form-content">
                                <input id="user-phone" name="phone" placeholder="telephonenumber" type="tel"
                                       value="${onlineUser.phone}">

                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-email" class="am-form-label">电子邮件</label>
                            <div class="am-form-content">
                                <input id="user-email" name="emai" placeholder="Email" type="email"
                                       value="${onlineUser.emai}">
                            </div>
                        </div>
                        <div class="am-form-group address">
                            <label class="am-form-label">收货地址</label>
                            <div class="am-form-content address">
                                <a href="address.jsp">
                                    <p class="new-mu_l2cw">
                                        <span class="province">湖北</span>省
                                        <span class="city">武汉</span>市
                                        <span class="dist">洪山</span>区
                                        <span class="street">雄楚大道666号(中南财经政法大学)</span>
                                        <span class="am-icon-angle-right"></span>
                                    </p>
                                </a>
                            </div>

                        </div>
                        <div class="am-form-group safety">
                            <label class="am-form-label">账号安全</label>
                            <div class="am-form-content safety">
                                <a href="safety.jsp">

                                    <span class="am-icon-angle-right"></span>

                                </a>

                            </div>
                        </div>
                        <div class="info-btn">
                            <input type="submit" value="保存修改" class="am-btn am-btn-danger">
                        </div>

                    </form>
                </div>

            </div>

        </div>
        <!--底部-->
        <div class="footer"></div>
    </div>
    <aside class="menu"></aside>
</div>
</body>
<script>
    $(function () {
        $(".nav-table").load("<%= basePath %>static/business/person/nav.jsp");
        $("div.footer").load("<%= basePath %>static/business/home/footer.jsp");
        $("aside").load("<%= basePath %>static/business/home/aside.jsp");
    })
</script>
<script>
    var month_big = new Array("01", "03", "05", "07", "08", "10", "12"); //包含所有大月的数组
    var month_small = new Array("04", "06", "09", "11"); //包含所有小月的数组

    //页面加载时调用的初始化select控件的option的函数
    function init() {
        var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
        var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
        var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

        //将年份选项初始化，从1980到2020
        for (var i = 1900; i <= 2020; i++) {
            select_year_option = new Option(i, i);
            select_year.options.add(select_year_option);
        }

        //将月份选项初始化，从1到12
        for (var i = 1; i <= 12; i++) {
            select_month_option = new Option(i, i);
            select_month.options.add(select_month_option);
        }

        //调用swap_day函数初始化日期
        swap_day();

        document.getElementById("year").value = "${birthdayOfYear}";
        document.getElementById("month").value = "${birthdayOfMonth}";
        document.getElementById("day").value = "${birthdayOfDay}";
    }

    //判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
    function array_contain(array, obj) {
        for (var i = 0; i < array.length; i++) {
            if (array[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //根据年份和月份调整日期的函数
    function swap_day() {
        var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
        var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
        var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

        select_day.options.length = 0; //在调整前先清空日期选项里面的原有选项
        var month = select_month.options[select_month.selectedIndex].value; //获取被选中的月份month

        //如果month被包含在month_big数组中，即被选中月份是大月，则将日期选项初始化为31天
        if (array_contain(month_big, month)) {
            for (var i = 1; i <= 31; i++) {
                select_day_option = new Option(i, i);
                select_day.options.add(select_day_option);
            }
        }

        //如果month被包含在month_small数组中，即被选中月份是小月，则将日期选项初始化为30天
        else if (array_contain(month_small, month)) {
            for (var i = 1; i <= 30; i++) {
                select_day_option = new Option(i, i);
                select_day.options.add(select_day_option);
            }
        }

        //如果month为2，即被选中的月份是2月，则调用initFeb()函数来初始化日期选项
        else {
            initFeb();
        }
    }

    //判断年份year是否为闰年，是闰年则返回true，否则返回false
    function isLeapYear(year) {
        var a = year % 4;
        var b = year % 100;
        var c = year % 400;
        if (((a == 0) && (b != 0)) || (c == 0)) {
            return true;
        }
        return false;
    }

    //根据年份是否闰年来初始化二月的日期选项
    function initFeb() {
        var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
        var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
        var year = parseInt(select_year.options[select_year.selectedIndex].value); //获取被选中的年份并转换成Int

        //如果是闰年，则将日期选项初始化为29天
        if (isLeapYear(year)) {
            for (var i = 1; i <= 29; i++) {
                select_day_option = new Option(i, i);
                select_day.options.add(select_day_option);
            }
        }

        //如果不是闰年，则将日期选项初始化为28天
        else {
            for (var i = 1; i <= 28; i++) {
                select_day_option = new Option(i, i);
                select_day.options.add(select_day_option);
            }
        }
    }

    //上传头像
    function updateHeaderUrl() {
        var headUrl = $("input[name='headUrl']").val();
        headUrl = headUrl.substring(headUrl.lastIndexOf("\\") + 1);
        window.location.href = "cntApi/uploadHeadUrl?headUrl=" + headUrl;
    }

</script>
</html>